<template>
	<scroll-view scroll-y class="scroll-view">
		<view class="card-wrap">
			<view class="card-header flex">
				今日跌倒次数：{{ todayFallCount }}
			</view>
			<view class="card-body">
				<view class="step-list">
					<view class="item" v-for="item,index in listData" :key="index">
						<view class="dot"></view>
						<view class="wrap">
							<view class="title">{{ item.time }}</view>
							<view class="content" :class="{'status-warning':item.fallInfo=='疑似跌倒'}">{{ item.fallInfo }}</view>
						</view>
						<view class="status-wrap">
							<view v-if="item.handleInfo == '处理'" class="btn-deal" @click="bindDeal">处理</view>
							<text v-if="item.handleInfo == '已处理'" class="txt">已处理</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" color="#AFAFAF" fontSize="26rpx" />
		</view>
	</scroll-view>
</template>

<script>
export default {
	props: {
		deviceSn: String

	},
	data() {
		return {
			status: 'nomore',
			listData: [],
			todayFallCount: 0
		};
	},
	mounted() {
		this.getFallInfoData();
	},
	methods: {
		// 获取跌倒详情
		async getFallInfoData() {
			this.status = 'loading';
			const params = {
				deviceSn: this.deviceSn
			};
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-datacenter/fallIndexInfo', params));
			if (err) return;
			this.listData = result;
			this.status = 'nomore';
		},
		// 处理
		bindDeal() {
			uni.$u.toast('功能未完成');
		}
	}
};
</script>

<style lang="scss" scoped>
.scroll-view {
	height: 100%;
	box-sizing: border-box;
	padding: 28rpx 32rpx;
}
.card-wrap {
	background-color: #fff;
	border-radius: 30rpx;
	padding-bottom: 1rpx;
	.card-header {
		font-size: 28rpx;
		color: #4E5C7F;
		height: 103rpx;
		padding: 0 37rpx;
		border-bottom: 1px solid rgba(112, 112, 112, 0.31);
	}
	.card-body {
		padding: 30rpx 35rpx;
	}
}
.step-list {
	.item {
		position: relative;
		border-left: 1px solid #417CE9;
		padding-left: 22rpx;
		padding-bottom: 50rpx;
		&:nth-last-of-type(1) {
			padding-bottom: 10rpx;
		}
		.dot {
			position: absolute;
			top: 0;
			left: 0;
			transform: translateX(-50%);
			width: 21rpx;
			height: 21rpx;
			border-radius: 50%;
			border: 1px solid #4284FF;
			background-color: #fff;
		}
		.wrap {
			width: 65%;
			.title {
				font-size: 28rpx;
				color: #4E5C7F;
			}
			.content {
				font-size: 32rpx;
				color: #1E2531;
				margin-top: 7rpx;
				font-weight: bold;
				&.status-warning {
					color: #FFAE43;
				}
			}
		}
		.status-wrap {
			position: absolute;
			right: 38rpx;
			top: 11rpx;
			.btn-deal {
				border-radius: 60rpx;
				width: 140rpx;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				background-color: #417CE9;
			}
			.txt {
				font-size: 28rpx;
				color: #707070;
			}
		}
	}
}
</style>
